<template>
	<view class="footer">
		<view class="footer-center">
			<textarea class="input-text" auto-height :focus="focus" @confirm="sendMessge" v-model="inputValue" @blur="blur" @input="input" :placeholder="placeholder"></textarea>
		</view>
		<view class="footer-right">
			<view id='msg-type' class="send-comment" :class="{'canSend':canSend}" @tap="sendMessge">发送</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "chat-input",
		data() {
			return {
				inputValue: '',
				canSend:false
			}
		},
		props:{
			placeholder: {
				type: String,
				required: true
			},
			focus: {
				type:Boolean,
				required: true
			}
		},
		methods: {
			blur: function() {//失焦触发通知父组件
				this.$emit('blur')
			},
			sendMessge: function () {
				if (!this.inputValue) {
					uni.showToast({
						title:'还没有输入内容哦!',
						icon:'none'
					})
					return false;
				}
				var that = this;
				//点击发送按钮时，通知父组件用户输入的内容
				this.$emit('send-message', {
					type: 'text',
					content: that.inputValue
				});
				that.inputValue = '';//清空上次输入的内容
			},
			input: function (e) {
				if(e.target.value){
					this.canSend = true
				}
			}
		}
	}
</script>

<style>
	.footer {
		display: flex;
		flex-direction: row;
		width: 100%;
		border-top: solid 1px #bbb;
		padding: 5upx;
		background-color: #F4F5F6;
	}
	.footer-right {
		width: 120upx;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #1482D1;
	}
	.footer-center {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.footer-center .input-text {
		flex: 1;
		background: #fff;
		padding: 10upx !important;
		font-family: verdana !important;
		overflow: hidden;
		border-radius: 15upx;
		font-size: 28rpx;
		height: 80rpx;
	}
	.footer-right .send-comment{
		background-color: #cccccc;
		text-align: center;
		line-height: 60upx;
		color: #FFFFFF;
		width: 80upx;
		height: 60upx;
		border-radius: 5px;
		font-size: 24rpx;
	}
	.footer-right .canSend{
		background-color: #007AFF;
	}
</style>
